<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="hover">
        <div class="welcome-content">
          <div class="welcome-logo-section">
            <img src="/devenv-lt.webp" alt="DevEnv Title" class="welcome-title-img" />
          </div>
          <h1 class="welcome-title">欢迎使用 DevEnv 智能开发环境部署工具</h1>
          <p class="welcome-subtitle">
            面向高校师生及企业培训场景的智能开发环境自动化部署平台
          </p>
          <div class="welcome-features">
            <el-tag type="success" size="large">🚀 效率提升 80%</el-tag>
            <el-tag type="primary" size="large">🛡️ 稳定性保障</el-tag>
            <el-tag type="warning" size="large">🎓 教学适配</el-tag>
            <el-tag type="info" size="large">💻 轻量化部署</el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速开始 -->
    <div class="quick-start-section">
      <h2 class="section-title">
        <el-icon><Lightning /></el-icon>
        快速开始
      </h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" v-for="step in quickSteps" :key="step.id">
          <el-card class="step-card" shadow="hover" @click="handleStepClick(step.route)">
            <div class="step-content">
              <div class="step-number">{{ step.id }}</div>
              <el-icon class="step-icon" size="32">
                <component :is="step.icon" />
              </el-icon>
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-description">{{ step.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能特性 -->
    <div class="features-section">
      <h2 class="section-title">
        <el-icon><Star /></el-icon>
        核心功能
      </h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="feature in features" :key="feature.title">
          <el-card class="feature-card" shadow="hover">
            <div class="feature-content">
              <el-icon class="feature-icon" size="40">
                <component :is="feature.icon" />
              </el-icon>
              <h3 class="feature-title">{{ feature.title }}</h3>
              <p class="feature-description">{{ feature.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 支持的软件 -->
    <div class="software-section">
      <h2 class="section-title">
        <el-icon><Box /></el-icon>
        支持的开发工具
      </h2>
      <div class="software-grid">
        <div v-for="software in supportedSoftware" :key="software.name" class="software-item">
          <div class="software-logo">{{ software.logo }}</div>
          <div class="software-name">{{ software.name }}</div>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.label">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Lightning, Star, Box,
  Monitor, Document, DocumentCopy,
  Download, Upload, Share, Lock
} from '@element-plus/icons-vue'

const router = useRouter()

// 快速开始步骤
const quickSteps = ref([
  {
    id: 1,
    title: '选择软件',
    description: '从丰富的软件库中选择需要的开发工具',
    icon: 'Box',
    route: '/software'
  },
  {
    id: 2,
    title: '配置模板',
    description: '使用预设模板或创建自定义环境配置',
    icon: 'Document',
    route: '/template-market'
  },
  {
    id: 3,
    title: '生成脚本',
    description: '一键生成适合您系统的自动化部署脚本',
    icon: 'DocumentCopy',
    route: '/script'
  }
])

// 功能特性
const features = ref([
  {
    title: '智能镜像选择',
    description: '自动选择最优镜像源，提升下载速度',
    icon: 'Download'
  },
  {
    title: '模板管理',
    description: '支持环境模板创建、分享和导入导出',
    icon: 'Upload'
  },
  {
    title: '多平台支持',
    description: '支持Windows、Linux、macOS多平台部署',
    icon: 'Monitor'
  },
  {
    title: '安全可靠',
    description: '内置环境验证和错误恢复机制',
    icon: 'Lock'
  }
])

// 支持的软件
const supportedSoftware = ref([
  { name: 'Java JDK', logo: '☕' },
  { name: 'Node.js', logo: '🟢' },
  { name: 'Python', logo: '🐍' },
  { name: 'Git', logo: '📦' },
  { name: 'VS Code', logo: '💻' },
  { name: 'IntelliJ IDEA', logo: '💡' },
  { name: 'MySQL', logo: '🗄️' },
  { name: 'Maven', logo: '🔧' }
])

// 统计信息
const stats = ref([
  { label: '支持软件', value: '20+' },
  { label: '预设模板', value: '10+' },
  { label: '支持平台', value: '3' },
  { label: '用户满意度', value: '95%' }
])

// 处理步骤点击
const handleStepClick = (route) => {
  router.push(route)
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.welcome-section {
  margin-bottom: 40px;
}

.welcome-card {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.welcome-card :deep(.el-card__body) {
  padding: 60px 40px;
}

.welcome-content {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.welcome-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.welcome-title-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  max-width: 500px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

.welcome-subtitle {
  font-size: 18px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.welcome-features {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #2c3e50;
}

.quick-start-section {
  margin-bottom: 50px;
}

.step-card {
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.step-content {
  text-align: center;
  padding: 20px;
  position: relative;
}

.step-number {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.step-icon {
  color: #409eff;
  margin-bottom: 16px;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.step-description {
  color: #7f8c8d;
  line-height: 1.5;
}

.features-section {
  margin-bottom: 50px;
}

.feature-card {
  height: 100%;
}

.feature-content {
  text-align: center;
  padding: 20px;
}

.feature-icon {
  color: #67c23a;
  margin-bottom: 16px;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.feature-description {
  color: #7f8c8d;
  line-height: 1.5;
  font-size: 14px;
}

.software-section {
  margin-bottom: 50px;
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.software-item {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.software-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.software-logo {
  font-size: 32px;
  margin-bottom: 8px;
}

.software-name {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.stats-section {
  margin-bottom: 40px;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-title-img {
    height: 70px;
    max-width: 350px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .welcome-features {
    gap: 8px;
  }

  .software-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .welcome-title-img {
    height: 60px;
    max-width: 280px;
  }

  .welcome-logo-section {
    gap: 15px;
    margin-bottom: 25px;
  }
}
</style>
